<template>
  <div class="order-list-container">
    <h2 class="page-title">我的订单</h2>
    
    <div class="filter-container">
      <el-input
        v-model="queryParams.keyword"
        placeholder="搜索订单号或活动名称"
        class="search-input"
        clearable
        @keyup.enter="handleSearch"
      />
      <el-select v-model="queryParams.status" placeholder="订单状态" clearable @change="handleSearch">
        <el-option label="全部订单" value="" />
        <el-option label="待支付" value="unpaid" />
        <el-option label="已支付" value="paid" />
        <el-option label="已取消" value="cancelled" />
      </el-select>
      <el-button type="primary" @click="handleSearch">查询</el-button>
      <el-button @click="resetQuery">重置</el-button>
    </div>
    
    <div class="order-list">
      <el-empty v-if="orders.length === 0 && !loading" description="暂无订单记录" />
      
      <el-card v-for="order in orders" :key="order.id" class="order-item" shadow="hover">
        <div class="order-header">
          <div class="order-info">
            <span class="order-number">订单号：{{ order.id }}</span>
            <span class="order-date">下单时间：{{ order.createdAt }}</span>
          </div>
          <div class="order-status">
            <el-tag :type="getOrderStatusType(order.status)">
              {{ order.statusDesc || getOrderStatusText(order.status) }}
            </el-tag>
          </div>
        </div>
        
        <div class="order-content">
          <div class="order-content-item">
            <div class="event-info">
              <div class="event-detail">
                <h3 class="event-name">{{ order.eventName }}</h3>
                <p class="ticket-name">票种：{{ order.ticketName }}</p>
                <p class="ticket-price">单价：¥ {{ order.totalPrice / order.quantity }} × {{ order.quantity }}</p>
              </div>
            </div>
          </div>
        </div>
        
        <div class="order-footer">
          <div class="order-amount">
            <span>总计：</span>
            <span class="price">¥ {{ order.totalPrice }}</span>
          </div>
          <div class="order-actions">
            <el-button size="small" @click="viewOrderDetail(order.id)">查看详情</el-button>
            <el-button v-if="order.status === 'unpaid'" type="primary" size="small" @click="goToPay(order.id)">去支付</el-button>
            <el-button v-if="order.status === 'unpaid'" type="danger" size="small" @click="cancelOrder(order.id)">取消订单</el-button>
          </div>
        </div>
      </el-card>
    </div>
    
    <div class="pagination-container" v-if="total > 0">
      <el-pagination
        v-model:currentPage="queryParams.page"
        v-model:pageSize="queryParams.size"
        :page-sizes="[5, 10, 20, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getMyOrders } from '@/api/order'

const router = useRouter()

// 查询参数
const queryParams = reactive({
  page: 1,
  size: 10,
  keyword: '',
  status: ''
})

// 订单列表
const orders = ref([])
// 总记录数
const total = ref(0)
// 加载状态
const loading = ref(false)

// 获取订单列表
const fetchOrders = async () => {
  loading.value = true
  try {
    const res = await getMyOrders(queryParams)
    console.log('订单列表响应:', res)
    
    if (res.code === 200 && res.data) {
      // 处理订单数据
      if (res.data.records) {
        orders.value = res.data.records
        total.value = res.data.total || 0
      } else if (Array.isArray(res.data)) {
        orders.value = res.data
        total.value = res.data.length
      } else {
        orders.value = []
        total.value = 0
      }
      
      console.log('处理后的订单数据:', orders.value)
    } else {
      ElMessage.error(res.msg || '获取订单列表失败')
    }
  } catch (error) {
    console.error('获取订单列表出错:', error)
    ElMessage.error('获取订单列表失败')
  } finally {
    loading.value = false
  }
}

// 查询
const handleSearch = () => {
  queryParams.page = 1
  fetchOrders()
}

// 重置查询
const resetQuery = () => {
  queryParams.page = 1
  queryParams.keyword = ''
  queryParams.status = ''
  fetchOrders()
}

// 每页条数变化
const handleSizeChange = (size) => {
  queryParams.size = size
  fetchOrders()
}

// 页码变化
const handleCurrentChange = (page) => {
  queryParams.page = page
  fetchOrders()
}

// 查看订单详情
const viewOrderDetail = (id) => {
  router.push({
    path: '/front/user/order-detail',
    query: { id }
  })
}

// 去支付
const goToPay = (id) => {
  router.push({
    path: '/front/order/pay',
    query: { orderId: id }
  })
}

// 取消订单
const cancelOrder = async (id) => {
  try {
    await ElMessageBox.confirm('确定要取消该订单吗？取消后不可恢复', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    ElMessage.success('订单已取消')
    // 刷新订单列表
    fetchOrders()
  } catch (error) {
    console.log('用户取消操作')
  }
}

// 获取订单状态类型
const getOrderStatusType = (status) => {
  switch (status) {
    case 'paid': return 'success'
    case 'unpaid': return 'warning'
    case 'cancelled': return 'danger'
    default: return 'info'
  }
}

// 获取订单状态文本
const getOrderStatusText = (status) => {
  switch (status) {
    case 'paid': return '已支付'
    case 'unpaid': return '待支付'
    case 'cancelled': return '已取消'
    default: return '未知状态'
  }
}

// 页面加载时获取数据
onMounted(() => {
  fetchOrders()
})
</script>

<style scoped>
.order-list-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.page-title {
  font-size: 40px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 40px;
  letter-spacing: -0.5px;
}

.filter-container {
  display: flex;
  gap: 16px;
  margin-bottom: 32px;
  align-items: center;
}

.search-input {
  max-width: 300px;
}

.filter-container :deep(.el-input__wrapper),
.filter-container :deep(.el-select .el-input__wrapper) {
  background: rgba(0, 0, 0, 0.03);
  border: none;
  box-shadow: none !important;
  border-radius: 12px;
  height: 44px;
}

.filter-container :deep(.el-input__wrapper:hover),
.filter-container :deep(.el-select .el-input__wrapper:hover) {
  background: rgba(0, 0, 0, 0.05);
}

.filter-container :deep(.el-input__inner) {
  color: #1d1d1f;
  font-size: 15px;
}

.filter-container :deep(.el-button) {
  height: 44px;
  padding: 0 24px;
  font-size: 15px;
  font-weight: 500;
  border-radius: 22px;
}

.filter-container :deep(.el-button--primary) {
  background: #5e5ce6;
  border-color: #5e5ce6;
}

.filter-container :deep(.el-button--primary:hover) {
  background: #6b69e3;
  border-color: #6b69e3;
}

.filter-container :deep(.el-button:not(.el-button--primary)) {
  color: #5e5ce6;
  border-color: rgba(94, 92, 230, 0.2);
}

.filter-container :deep(.el-button:not(.el-button--primary):hover) {
  background: rgba(94, 92, 230, 0.05);
  border-color: rgba(94, 92, 230, 0.3);
}

.order-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.order-item {
  border: none;
  border-radius: 20px;
  background: #fbfbfd;
  overflow: hidden;
  transition: all 0.3s ease;
}

.order-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.order-info {
  display: flex;
  gap: 24px;
  color: #86868b;
  font-size: 14px;
}

.order-number {
  font-family: 'SF Mono', monospace;
}

.order-status :deep(.el-tag) {
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 20px;
  font-weight: 500;
}

.order-status :deep(.el-tag--success) {
  background-color: rgba(52, 199, 89, 0.1);
  border-color: transparent;
  color: #34c759;
}

.order-status :deep(.el-tag--warning) {
  background-color: rgba(255, 159, 10, 0.1);
  border-color: transparent;
  color: #ff9f0a;
}

.order-status :deep(.el-tag--danger) {
  background-color: rgba(255, 55, 95, 0.1);
  border-color: transparent;
  color: #ff375f;
}

.order-status :deep(.el-tag--info) {
  background-color: rgba(142, 142, 147, 0.1);
  border-color: transparent;
  color: #8e8e93;
}

.order-content {
  padding: 24px;
}

.event-info {
  display: flex;
  gap: 20px;
}

.event-detail {
  flex: 1;
}

.event-name {
  font-size: 18px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 12px;
}

.ticket-name,
.ticket-price {
  font-size: 14px;
  color: #86868b;
  margin: 8px 0;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: #f5f5f7;
}

.order-amount {
  font-size: 15px;
  color: #1d1d1f;
}

.price {
  font-size: 20px;
  font-weight: 600;
  color: #5e5ce6;
  margin-left: 8px;
}

.order-actions {
  display: flex;
  gap: 12px;
}

.order-actions :deep(.el-button) {
  border-radius: 15px;
  font-size: 14px;
  padding: 8px 16px;
}

.order-actions :deep(.el-button--primary) {
  background: #5e5ce6;
  border-color: #5e5ce6;
}

.order-actions :deep(.el-button--primary:hover) {
  background: #6b69e3;
  border-color: #6b69e3;
}

.order-actions :deep(.el-button--danger) {
  background: #ff375f;
  border-color: #ff375f;
  color: #fff;
}

.order-actions :deep(.el-button--danger:hover) {
  background: #ff4b6e;
  border-color: #ff4b6e;
}

.pagination-container {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

.pagination-container :deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
  background-color: #5e5ce6;
}

.pagination-container :deep(.el-pagination.is-background .el-pager li) {
  border-radius: 50%;
  margin: 0 4px;
  min-width: 32px;
  height: 32px;
  line-height: 32px;
}

@media (max-width: 768px) {
  .order-list-container {
    padding: 20px;
  }

  .page-title {
    font-size: 32px;
    margin-bottom: 24px;
  }

  .filter-container {
    flex-direction: column;
    gap: 12px;
  }

  .search-input {
    max-width: 100%;
  }

  .order-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .order-info {
    flex-direction: column;
    gap: 8px;
  }

  .order-footer {
    flex-direction: column;
    gap: 16px;
  }

  .order-actions {
    width: 100%;
    justify-content: flex-end;
  }
}
</style> 